<template>
  <div>
    <div class="maincss">
      <el-row>
        <el-card class="">
          <el-row class="searchbox">
            <el-col span="3">
              <el-input placeholder="文件名称" v-model="queryParams.fileName" />
            </el-col>
            <el-col span="3">
              <el-input
                placeholder="所属项目"
                v-model="queryParams.projectId"
              />
            </el-col>
            <el-col span="3">
              <el-select
                v-model="queryParams.status"
                placeholder="文件状态"
                class=""
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col span="1">
              <el-button @click="getQualityFiles">查询</el-button>
            </el-col>
            <el-col span="1">
              <el-button @click="handleOpenAdd">新增</el-button>
            </el-col>
          </el-row>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-table
              v-loading="loading"
              :data="qualityFiles"
              style="width: 100%"
              @row-click="toDetail(form.id)"
            >
              <!-- @row-click="toDetail(form.id)" -->
              <el-table-column
                label="质控文件名称"
                align="center"
                prop="fileName"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="最新版本号"
                align="center"
                prop="version"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="所属项目"
                align="center"
                prop="projectId"
              />
              <el-table-column
                label="创建人"
                align="center"
                prop="creater"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="状态"
                align="center"
                prop="status"
                :formatter="formatStatus"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="最后更新时间"
                align="center"
                prop="updateTime"
              />
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="showNoDetail(scope.row)"
                    >变更
                  </el-button>
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleForceLogout(scope.row)"
                    >作废
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getQualityFiles"
          />
        </el-card>
      </el-row>
    </div>

    <el-drawer
      title="新增"
      :visible.sync="isVisibleAdd"
      size="80%"
      :before-close="handleCloseAdd"
    >
      <addQuality @func="showAdd" />
    </el-drawer>

    <!--    有流程-->
    <el-drawer
      title="变更"
      :visible.sync="isVisibleDetail"
      size="80%"
      :before-close="handleCloseDetail"
    >
      <qualityDetail ref="quaDeta" @func="showDetail" />
    </el-drawer>

    <!--    无流程-->
    <el-drawer
      title="变更"
      :visible.sync="isVisibleNoDetail"
      size="80%"
      :before-close="handleCloseNoDetail"
    >
      <qualityNoDetail ref="qualityNoDetail" @func="showNoDetail" />
    </el-drawer>
  </div>
</template>

<script>
import addQuality from "@/views/project/qualityFile/components/addQuality";
import qualityDetail from "@/views/project/qualityFile/components/qualityDetail";
import qualityNoDetail from "@/views/project/qualityFile/components/qualityNoDetail";
import {
  listQualityFiles,
  updateQualityFiles
} from "@/api/business/qualityFiles";

export default {
  name: "maintenanceInfo",
  components: {
    addQuality,
    qualityDetail,
    qualityNoDetail,
    listQualityFiles
  },
  data() {
    return {
      btn: {
        add: true,
        reg: false,
        down: false,
        export: false,
        imp: false
      },
      qualityFiles: [],
      loading: false,
      redirect: undefined,
      activeName: "1",
      deviceInfo: {},
      dateOptions: [
        {
          value: "选项1",
          label: "最近30天"
        },
        {
          value: "选项2",
          label: "最近一周"
        },
        {
          value: "选项3",
          label: "最近半月"
        },
        {
          value: "选项4",
          label: "最近一年"
        },
        {
          value: "选项5",
          label: "自定义"
        }
      ],
      status: [
        {
          value: "",
          label: "选择文件状态"
        },
        {
          value: "1",
          label: "已发布"
        },
        {
          value: "0",
          label: "作废"
        }
      ],
      inspectionRsult: [],
      value: "",
      total: 10,
      queryParams: {
        fileName: "",
        projectId: "",
        status: undefined,
        pageNum: 1,
        pageSize: 10
      },
      isVisibleAdd: false,
      isVisibleDetail: false,
      isVisibleNoDetail: false,
      isApproval: true,
      form: {
        id: null,
        fileName: "",
        fileType: "",
        projectId: "",
        creater: "",
        publishTime: null,
        description: "",
        version: ""
      }
    };
  },
  created() {
    this.getQualityFiles();
  },
  methods: {
    showBtn(data) {
      if (data == "add") {
        this.$router.push({ path: "/project/qualityFile/addQuality" });
      }
    },
    toDetail() {
      this.$router.push({
        path: "/project/qualityFile/qualityDetail"
      });
    },
    getQualityFiles() {
      this.loading = true;
      listQualityFiles(this.queryParams).then(response => {
        this.qualityFiles = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 变更
    handleOpenEdit(data) {
      if (this.isApproval) {
        this.isVisibleDetail = true;
      } else {
        this.isVisibleNoDetail = false;
      }
    },
    // 有流程页面
    showDetail(data) {
      this.isVisibleDetail = data;
    },
    handleCloseDetail() {
      this.isVisibleDetail = false;
    },
    // 无流程页面
    showNoDetail(data) {
      this.isVisibleNoDetail = data;
      this.$nextTick(() => {
        this.$refs.qualityNoDetail.handleData(data);
      });
    },
    handleCloseNoDetail() {
      this.isVisibleNoDetail = false;
      this.getQualityFiles();
    },
    // 打开新增
    showAdd(data) {
      this.isVisibleAdd = true;
    },
    handleOpenAdd() {
      this.editId = "";
      this.isVisibleAdd = true;
      this.getProjectChekoutList();
    },
    handleCloseAdd() {
      this.isVisibleAdd = false;
    },
    formatStatus(row) {
      let statusHash = {
        1: "已发布",
        0: "废弃"
      };
      return statusHash[row.status];
    },
    handleForceLogout(row) {
      row.status = 0;
      this.loading = true;
      updateQualityFiles(row).then(response => {
        this.loading = false;
      });
    }
  }
};
</script>
